<template>
  <el-container>
    <el-header style="height: 50px;background-color:#ffffff;">
      <span>我的提问</span>
    </el-header>
    <!-- <el-main style="text-align:left;">
      <el-card
        :body-style="{ padding: '0px' }"
        shadow="never"
      >
        <div
          slot="header"
          class="clearfix"
        >
          <span style="font-size:25px; font-weight:bold; color:black;">问题集</span>
        </div>
        <div
          v-for="(user) in tableData"
          :key="user.userId"
        >
          <el-card
            :body-style="{ padding: '8px' }"
            style="margin:10px;"
          >
            <div slot="header">
              <div>
                <el-link
                  style="font-size:25px; font-weight:bold; color:black;"
                  :underline="false"
                >{{user.title}}</el-link>
                <div>{{user.username}} --- {{user.userId}} --- {{user.postTime}}</div>
              </div>
              <div style="display: flex;flex-direction: row;justify-content: space-around;">
                <el-image
                  v-show="user.url !== ''"
                  style="width: 100px; height: 105px"
                  :src="user.url"
                  :preview-src-list="[user.url]"
                  fit="scale-down"
                ></el-image>
                <div
                  class='sole'
                  :class="user.fold ? 'fold' : 'unfold'"
                  style="width:80%;"
                >{{user.content}}</div>
              </div>
            </div>
            <div>
              <el-tag v-if=user.hasBestAnswer>存在优解</el-tag>
              <el-tag
                v-else
                type="danger"
              >暂无优解</el-tag>
              <el-button
                type="primary"
                size="mini"
                @click='user.fold = !user.fold'
                v-show="user.fold"
                class="el-icon-bottom"
                style="float: right;"
              >展开</el-button>
              <el-button
                type="primary"
                size="mini"
                @click='user.fold = !user.fold'
                v-show="!user.fold"
                class="el-icon-top"
                style="float: right;"
              >收起</el-button>
            </div>
          </el-card>

        </div>

      </el-card>

    </el-main> -->
  </el-container>
</template>

<script>
export default {
  name: 'myqustion',
  data () {
    return {
      tableData: [{
        title: 'this is first thread',
        content: '荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻 荷兰优质淡奶，奶香浓而不腻',
        username: 'admin',
        userId: '3',
        postTime: '2020-02-17T13:03:00.147178800Z',
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        fold: true,
        hasBestAnswer: true
      }
      ]
    }
  },
  methods: {
  }
  // created: function () {
  //   this.$http.defaults.headers.common['token'] = sessionStorage.getItem("token")
  //   this.$http.get("/api/thread/"+"47")
  //     .then((response) => {
  //       console.log(response.data);

  //     })
  //     .catch(function (error) {
  //       if (error.response) {
  //               // 请求已发出，但服务器响应的状态码不在 2xx 范围内
  //               console.log(error.response.data);
  //               console.log(error.response.status);
  //               console.log(error.response.headers);
  //             } else {
  //               // Something happened in setting up the request that triggered an Error
  //               console.log('Error', error.message);
  //             }
  //             console.log(error.config);
  //     })
  // }
}
</script>
<style lang = "less" scoped>
.el-header {
  line-height: 50px;
  display: flex;
  justify-content: flex-start;
  font-size: 16px;
  color: #00a1d6;
  border-bottom: 1px solid #e1e2e5;
}
.sole {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sole.fold {
  -webkit-line-clamp: 5;
}

.sole.unfold {
  -webkit-line-clamp: 100;
}
</style>
